<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
	<script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
	<!--css文件-->
	<link rel="stylesheet" href="css/style.css">
	<!--字体图标文件-->
	<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
	<script src="js/index.js"></script>
	<!--Font Awesome是一套专为Twitter Bootstrap设计的图标字体，几乎囊括了网页中可能用到的所有图标，这些图标通过Web Font的方式来显示，可以被任意缩放、改变颜色，你可以像修改文字样式那样来修改图标样式。 -->
</head>

<body class="container-fluid">
	<div class="row">
		<!--header-->
		<div class="col-12 col-lg-3 left ">
			<div id="template1">
				<div class="row">
					<div class="col-10">
						<ul class="nav">
							<li class="nav-item">
								<a class="nav-link active" href="index.html">
									<img width="40" src="images/logo.png" alt="" class="rounded-circle">
								</a>
							</li>
							<li class="nav-item mt-1 a">
								<a class="nav-link" href="#">账户</a>
							</li>
							<li class="nav-item mt-1 a">
								<a class="nav-link" href="#">菜单</a>
							</li>
						</ul>
					</div>
					<div class="col-2 mt-2 font-menu text-right">
						<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
							aria-controls="offcanvasExample">
							<i class="fa fa-bars"></i></a>
					</div>
					<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
						aria-labelledby="offcanvasExampleLabel">
						<div class="offcanvas-header">
							<h5 class="offcanvas-title" id="offcanvasExampleLabel"> <a class="nav-link mt-2 a"
									href="index.html">
									咖啡俱乐部
								</a>
							</h5>
							<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
								aria-label="Close"></button>
						</div>
						<div class="offcanvas-body">
							<div class="ms-5 mt-5">
								<h6><a href="index.html">门店</a></h6>
								<h6><a href="index.html">俱乐部</a></h6>
								<h6><a href="index.html">菜单</a></h6>
								<hr />
								<h6><a href="index.html">移动应用</a></h6>
								<h6><a href="index.html">臻选精品</a></h6>
								<h6><a href="index.html">专星送</a></h6>
								<h6><a href="index.html">咖啡讲堂</a></h6>
								<h6><a href="index.html">烘焙工厂</a></h6>
								<h6><a href="index.html">帮助中心</a></h6>
								<hr />
								<a href="index.html" class="card-link btn rounded-pill text-success ps-0"><i
										class="fa fa-user-circle"></i>&nbsp;登&nbsp;录</a>
								<a href="index.html"
									class="card-link btn btn-outline-success rounded-pill text-success">注&nbsp;册</a>
							</div>
						</div>
					</div>
				</div>
				<div class="margin1">
					<h5 class="ml-3 my-3 d-none d-sm-block text-lg-center">
						<span class="b">心情惬意，来杯咖啡吧</span>&nbsp;&nbsp;<i class="fa fa-coffee"></i>
					</h5>
					<div class="ml-3 my-3 d-none d-sm-block text-lg-center">
						<a href="#" class="card-link btn  rounded-pill text-success a"><i
								class="fa fa-user-circle"></i>&nbsp;登&nbsp;录</a>
						<a href="#" class="card-link btn btn-outline-success rounded-pill text-success a">注&nbsp;册</a>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12 col-lg-9 right p-0 clearfix">
			<!-- 轮播 -->
			<div id="carousel" class="carousel slide" data-bs-ride="carousel">
				<!-- 指示图标 -->
				<div class="carousel-indicators">
					<button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active"></button>
					<button type="button" data-bs-target="#carousel" data-bs-slide-to="1"></button>
					<button type="button" data-bs-target="#carousel" data-bs-slide-to="2"></button>
				</div>
				<!-- 轮播图片和文字 -->
				<div class="carousel-inner max-h">
					<div class="carousel-item active">
						<img src="images/001.jpg" class="d-block w-100">
					</div>
					<div class="carousel-item">
						<img src="images/002.jpg" class="d-bloc kw-100">
					</div>
					<div class="carousel-item">
						<img src="images/003.jpg" class="d-block kw-100">
					</div>
				</div>
				<!-- 左右切换按钮 -->
				<button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
					<span class="carousel-control-prev-icon"></span> </button>
				<button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
					<span class="carousel-control-next-icon"></span></button>
			</div>

			<!--多列卡片排版-->
			<div class="p-4 list">
				<h5 class="text-center my-3 a">咖啡推荐</h5>
				<h5 class="text-center mb-4 a"><small>在购物旗舰店可以发现更多咖啡心意</small></h5>
				<div class="card-group">
					<div class="card my-4 my-sm-1">
						<div class="card-body">
							<img class="card-img-top" src="images/006.jpg" alt="">
						</div>
					</div>
					<div class=" card my-4 my-sm-1">
						<img class="card-img-top" src="images/004.jpg" alt="">
					</div>
					<div class="card my-4 my-sm-1">
						<img class="card-img-top" src="images/005.jpg" alt="">
					</div>
				</div>
			</div>

			<!--网格系统布局-->
			<div class="row py-5">
				<div class="col-12 col-sm-6 pt-2">
					<div class="card border-0 text-center text-sm-start">
						<div class="card-body ms-5">
							<h4 class="card-title">咖啡俱乐部</h4>
							<p class="card-text a">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。</p>
							<a href="#" class="card-link btn btn-outline-success a">注册</a>
							<a href="#" class="card-link btn btn-outline-success a">登录</a>
						</div>
					</div>
				</div>
				<div class="col-12 col-sm-6 text-center mt-5">
					<a href=""><img src="images/007.png" alt="" class="img-fluid"></a>
				</div>
			</div>
			<div class="p-4 list">
				<h5 class="text-center my-3">咖啡精选</h5>
				<h5 class="text-center mb-4 a"><small>在购物旗舰店可以发现更多咖啡心意</small></h5>
				<div class="row">
					<div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
						<div class="bg-light p-4 list-border rounded">
							<img class="img-fluid" src="images/008.jpg" alt="">
							<h6 class="text-secondary text-center mt-3 a">套餐一</h6>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
						<div class="bg-white p-4 list-border rounded">
							<img class="img-fluid" src="images/009.jpg" alt="">
							<h6 class="text-secondary text-center mt-3 a">套餐二</h6>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
						<div class="bg-light p-4 list-border rounded">
							<img class="img-fluid" src="images/010.jpg" alt="">
							<h6 class="text-secondary text-center mt-3 a">套餐三</h6>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
						<div class="bg-light p-4 list-border rounded">
							<img class="img-fluid" src="images/011.jpg" alt="">
							<h6 class="text-secondary text-center mt-3 a">套餐四</h6>
						</div>
					</div>
				</div>
			</div>
			<div class="p-4">
				<h5 class="text-center my-3">咖啡讲堂</h5>
				<h5 class="text-center mb-4 a"><small>了解更多咖啡文化</small></h5>
				<div class="box">
					<ul id="ulList" class="clearfix">
						<li class="list-border rounded">
							<img src="images/015.jpg" alt="" width="300">
							<h6 class="text-center mt-3 a">咖啡种植</h6>
						</li>
						<li class="list-border rounded">
							<img src="images/014.jpg" alt="" width="300">
							<h6 class="text-center mt-3 a">咖啡调制</h6>
						</li>
						<li class="list-border rounded">
							<img src="images/013.jpg" alt="" width="300">
							<h6 class="text-center mt-3 a">咖啡烘焙</h6>
						</li>
						<li class="list-border rounded">
							<img src="images/012.jpg" alt="" width="300">
							<h6 class="text-center mt-3 a">手冲咖啡</h6>
						</li>
					</ul>
					<div id="left">
						<i class="fa fa-chevron-circle-left fa-2x text-success"></i>
					</div>
					<div id="right">
						<i class="fa fa-chevron-circle-right fa-2x text-success"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--footer——在sm型设备尺寸下显示-->
	<div class="row fixed-bottom d-block d-sm-none py-1 bg-light border-top" id="footer">
		<ul class="text-center p-0" id="myTab">
			<li>
				<a class="ab b  text-dark" href="index.html"><i class="fa fa-home fa-2x p-1"></i><br />主页</a>
			</li>
			<li>
				<a class="b  text-dark" href="#"><i class="fa fa-calendar-minus-o fa-2x p-1"></i><br />门店</a>
			</li>
			<li>
				<a class="b  text-dark" href="#"><i class="fa fa-user-circle-o fa-2x p-1"></i><br />我的账户</a>
			</li>
			<li>
				<a class="b  text-dark" href="#"><i class="fa fa-bitbucket-square fa-2x p-1"></i><br />菜单</a>
			</li>
			<li>
				<a class="b  text-dark" href="#"><i class="fa fa-table fa-2x p-1"></i><br />更多</a>
			</li>
		</ul>
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
	$(function () {
		var nowIndex = 0;
		var liNumber = $("#ulList li").length;
		function change(index) {
			var ulMove = index * 300;    //设置移动距离
			$("#ulList").animate({ left: "-" + ulMove + "px" }, 500);
		}
		$("#left").click(function () {
			nowIndex = (nowIndex > 0) ? (--nowIndex) : 0;
			change(nowIndex);
		})
		$("#right").click(function () {
			nowIndex = (nowIndex < liNumber - 1) ? (++nowIndex) : (liNumber - 1);
			change(nowIndex);
		});
	})
</script>

</html>